<script lang="ts">
import type { TReward } from '~comp-b/global-popups/claim-success/index.vue';
import { useThrottleFn } from '@peng_kai/kit/libs/vueuse';
import ActiveSvg from '~/assets/imgs/rank/active-bg.svg';
import BgSvg from '~/assets/imgs/rank/bg.svg';
import GifImg from '~/assets/imgs/user/gift.png';
import { useUserStore } from '~/stores';
import RankBadge from './RankBadge.vue';

export const rankPopup = useAntdModal(
  // eslint-disable-next-line import/no-self-import
  defineAsyncComponent(() => import('../rank/RankSwipe.vue')),
  {
    wrapClassName: 'ant-cover__Modal-drawer ant-cover__Modal-rank __screen-drawer',
    width: 720,
    centered: true,
    footer: null,
  },
);
</script>

<script lang="ts" setup>
const props = withDefaults(defineProps<{
  activeLevel?: number;
  isPopuo?: boolean;
}>(), {
  isPopuo: true,
});
// const emits = defineEmits<{
//   close: [];
// }>();
const bp = useAppBreakpoints();
const swipe = ref<any>(null);
const breakpoints = computed(() => (props.isPopuo && bp.tabletl) ? {
  1023: {
    slidesPerView: 2,
    spaceBetween: '35%',
  },
  1024: {
    slidesPerView: 3,
    spaceBetween: 14,
  },
} : {
  320: { slidesPerView: 2, spaceBetween: '60%' },
  360: { slidesPerView: 2, spaceBetween: '43%' },
  498: { slidesPerView: 2, spaceBetween: '10%' },
  // 大于 600 小于940
  600: { slidesPerView: 3, spaceBetween: '48%' },
  940: { slidesPerView: 3, spaceBetween: 30 },
  1024: { slidesPerView: 3, spaceBetween: 30 },
  1440: { slidesPerView: 4, spaceBetween: 30 },
  1600: { slidesPerView: 5, spaceBetween: 30 },
});
const { levelInfo, levelInfoQry } = queries.useLevelQuery();
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const { bonusesQry } = queries.useBonusesQuery();
const hasClaim = computed(() => levelInfo.value?.find(l => l.status === 1));
const currency = ref<TReward[]>([]);
const claimLevel = ref(0);
const claimMut = useMutation({
  mutationKey: [apis.apiLevelGetUpgradeReward.id],
  mutationFn: apis.apiLevelGetUpgradeReward,
  onSuccess() {
    currency.value = [{
      symbol: 'USDT',
      amount: bignumber(Number(levelInfo.value?.[toValue(claimLevel.value) - 1]?.upgrade_reward)), // todo 此处不能用swipe的index作为索引
    }];
    globalPopups.claimSuccess.open({ reward: currency });
    // globalPopups.claimSuccess.open({ reward: currency }).then(() => emits('close'));
  },
  onSettled() {
    levelInfoQry?.refetch();
    bonusesQry?.refetch();
  },
});

const currentLevel = computed(() => {
  return userInfo.value?.vip_level?.level || 0;
});

function isCurrent(level: number) {
  return level === currentLevel.value;
}

const claimReward = useThrottleFn((level: number) => {
  claimLevel.value = level;
  if (levelInfo.value?.[level - 1].status !== 1)
    return;
  claimMut.mutate({ requestBody: { level } });
}, 1000);

function initSwipe() {
  let level = Number(currentLevel.value);
  if (props?.activeLevel)
    level = props.activeLevel;
  else if (hasClaim.value)
    level = Number(hasClaim.value.level);
  return level - 1;
}

function pre() {
  swipe.value?.prev?.();
}

onMounted(() => {
  levelInfoQry?.refetch();
});

function next() {
  swipe.value?.next?.();
}
const loop = ref(false);
onMounted(() => {
  setTimeout(() => (loop.value = true), 1000);
});
</script>

<template>
  <div class="">
    <template v-if="props.isPopuo">
      <div class="relative px-7 pb-2 pt-7 text-center text-6">
        {{ $t('duuM47ZwKoUi6vi5ruPoi') }}
      </div>

      <div class="mx-7 text-center text-3.5 text-sys-text-body leading-normal">
        {{ $t('14oumf2AfHqn1Ljo_4bnm') }}
      </div>
    </template>
    <swiper-container
      ref="swipe"
      :loop="loop"
      :navigation="{ extEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }"
      class="my-7.5 lt-tabletl:my-3.5 !overflow-visible"
      :speed="700"
      :centeredSlides="$bp.ltTabletl || props.isPopuo"
      :initialSlide="initSwipe()"
      :breakpoints="breakpoints"
    >
      <swiper-slide v-for="(item, index) in levelInfo" :key="index" class="flex flex-col items-center">
        <div class="relative h-112 flex items-center justify-center text-center">
          <img v-if="isCurrent(item.level)" class="w-57.5" :src="ActiveSvg">
          <img v-else class="w-57.5" :src="BgSvg">

          <div class="rank-slider__slider-body relative">
            <RankBadge :level="item.level_icon" />
            <div class="absolute right-11 top-13 h-5.5 w-5.5 flex items-center justify-center border-(1px slate-600 rd-[50%] solid) bg-sys-layer-d text-3 text-sys-text-body">
              {{ item.level }}
            </div>
            <h4 class="mb-4 mt-3.5 text-5">
              {{ item.name }}
            </h4>
            <!-- cesdabao -->
            <div class="rank-slider__details">
              <div>
                <p class="rank-slider__label">
                  {{ $t('vwIm7RlsltxuHa5JwVxcO') }}
                </p>
                <p class="rank-slider__cashback -10 mt-[2px] h-7 text-5 text-red50 leading-7">
                  {{ bignumber(item.cashback_rate).multipliedBy(100) }}%
                </p>
              </div>
              <div class="mt-5">
                <p class="rank-slider__label">
                  {{ $t('l1iu7OoocHuiizlam6Vh') }}
                </p>
                <p class="mt-1 h-[22px] text-4 text-sys-text-body leading-[22px]">
                  <span class="mr-[6px]">{{ bignumber(item.total_wager).toFormat() }}</span><span class="rank-slider__currency text-3.5">USD</span>
                </p>
              </div>
              <div v-if="Number(item.upgrade_reward)" class="mt-6">
                <p class="rank-slider__label">
                  {{ $t('xs9kkpOxkE6xvWOmQcgi6') }}
                </p>
                <p class="mt-1.5 h-[22px] flex items-end justify-center gap-2 text-4 leading-[22px]">
                  <span :class="[item.status === 1 && props.isPopuo && 'text-green500']">{{ bignumber(item.upgrade_reward).toFormat() }}</span><span class="rank-slider__currency text-3.5">
                    USDT
                  </span>
                  <img v-if="item.status === 1 && props.isPopuo" :src="GifImg" class="shake block size-5" @click="claimReward(item.level)">
                </p>
              </div>
            </div>
            <div
              v-if="(item.level <= currentLevel) && props.isPopuo && item.level !== 1 && item.status !== 0"
              class="mt-4.5 flex cursor-pointer items-center justify-center"
              :class="[item.status !== 1 ? 'grayscale text-gray' : '']"
              @click="claimReward(item.level)"
            >
              <p class="rounded-2 bg-brand500 px-[30px] py-[10px] text-3.5">
                {{ item.status === 2 ? $t('r7ivO81mOlU4yBfwfsd5Q') : $t('sx5fQf4CaYkEuTPtBdzg') }}
              </p>
            </div>
          </div>
        </div>
      </swiper-slide>
    </swiper-container>
    <div class="lt-tabletl:mb-5">
      <div class="flex items-center justify-center gap-2.5 text-2xl">
        <span class="swiper-button-prev" @click="pre()">
          <i class="i-ri:arrow-left-s-line" />
        </span>
        <span class="swiper-button-next" @click="next()">
          <i class="i-ri:arrow-right-s-line" />
        </span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.rank-slider__slider-body {
  position: absolute;
  top: 39%;
  left: 50%;
  width: 200px;
  height: 300px;
  transform: translate(-50%, -50%);
}

.swiper-button-disabled {
  pointer-events: none;
  opacity: 0.5;
}

.rank-slider__label {
  --uno: 'text-3 text-sys-text-body';
}

.shake {
  --uno: 'top-[-8px] left-[-24px] ';

  animation: jump-and-shake 3s infinite;
}

.swiper-bit {
  --uno: 'h-8.5 w-8.5 flex items-center justify-center rounded-1 bg-sys-layer-e';
  i {
    --uno: 'text-sys-text-head active:text-sys-text-body';
  }
}

@keyframes jump-and-shake {
  /* Jump up and down */

  4% {
    transform: translateY(-6px);
  }

  12% {
    transform: translateY(-6px);
  }

  15% {
    transform: translateY(0);
  }

  /* Shake like an alarm clock */
  30% {
    transform: rotate(0);
  }

  38% {
    transform: rotate(-15deg);
  }

  40% {
    transform: rotate(15deg);
  }

  42% {
    transform: rotate(-18deg);
  }

  44% {
    transform: rotate(18deg);
  }

  46% {
    transform: rotate(-22deg);
  }

  48% {
    transform: rotate(22deg);
  }

  50% {
    transform: rotate(-18deg);
  }

  52% {
    transform: rotate(18deg);
  }

  54% {
    transform: rotate(-12deg);
  }

  56% {
    transform: rotate(12deg);
  }

  58% {
    transform: rotate(0);
  }

  0%,
  8%,
  16%,
  24%,
  32%,
  100% {
    transform: translateY(0);
  }
}
</style>

<style>
.ant-cover__Modal-drawer.ant-cover__Modal-rank {
  .ant-modal-content {
    background: linear-gradient(180deg, #26272e, #18181c) !important;
  }
}
</style>
